<template>
    <div class="main">
        <div class="logo"><img src="../../assets/img/logo.png" alt=""></div>
        <van-swipe class="my-swipe" :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" style="height: 160px;width: 100%;border-radius: 5px"/>
            </van-swipe-item>
        </van-swipe>
        <div style="padding-top: 15px">
            <van-grid :border="false" :column-num="2">
                <van-grid-item class="tu">
                    <van-image class="grid-image" src="https://img01.yzcdn.cn/vant/apple-1.jpg"/>
                    <div prop="text" class="grid-text">
                        <div class="title">图文问诊</div>
                        <div class="note">上传报告获得</div>
                        <div class="note">专家的解读与分析</div>
                    </div>
                </van-grid-item>
                <van-grid-item class="xian">
                    <van-image class="grid-image" src="https://img01.yzcdn.cn/vant/apple-2.jpg"/>
                    <div prop="text" class="grid-text">
                        <div class="title">在线问诊</div>
                        <div class="note">24小时智能</div>
                        <div class="note">机器人解答您的疑惑</div>
                    </div>
                </van-grid-item>
                <van-grid-item class="jia">
                    <van-image class="grid-image" src="https://img01.yzcdn.cn/vant/apple-3.jpg"/>
                    <div prop="text" class="grid-text">
                        <div class="title">专家问诊</div>
                        <div class="note">三甲医院专家</div>
                        <div class="note">定期与您相约问诊</div>
                    </div>
                </van-grid-item>
                <van-grid-item class="ce">
                    <van-image class="grid-image" src="https://img01.yzcdn.cn/vant/apple-1.jpg"/>
                    <div prop="text" class="grid-text">
                        <div class="title">智能测评</div>
                        <div class="note">真实测评</div>
                        <div class="note">了解自己身体状况</div>
                    </div>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            images: [
                'https://img01.yzcdn.cn/vant/apple-1.jpg',
                'https://img01.yzcdn.cn/vant/apple-2.jpg',
            ],
        };
    },
    activated() {
        this.$store.dispatch('setActive', 0);
    },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {

}
</style>
